<template>
	<view>
		<view class="order-content">
			<view style="margin-bottom: 40rpx;">
				<view class="detail-title">
					<text>公区检查表</text>
				</view>
			</view>
			<view v-if="checkList.length" class="check-content" style="margin-bottom: 20rpx;">
				<!-- <view class="check-title">巡逻检查项{{'(' + checkList.length + ')'}}</view> -->
				<view class="check-item" v-for="(item, index) in checkList" :key="item.id">
					<view :class="{'rightColor': item.isPass == 1, 'wrongColor': item.isPass === 2}">
						{{index+1}}、{{item.item}}
					</view>
					<view class="check-result">
						<uni-data-checkbox :selectedColor="item.isPass == 1 ? '#33cc33' : 'red'" v-model="item.isPass"
							:localdata="item.status"></uni-data-checkbox>
					</view>
					<inspect-record :inspect="item" v-if="item.isPass == 2 && (item.remark || item.accessory.length !== 0)"></inspect-record>
					
				</view>
			</view>
			<view style="margin-bottom: 40rpx;">
				<view class="detail-title">
					<text>公区成品保护表</text>
				</view>
			</view>
			<view v-if="protectList.length" class="check-content" style="margin-bottom: 20rpx;">
				<!-- <view class="check-title">巡逻检查项{{'(' + protectList.length + ')'}}</view> -->
				<view class="check-item" v-for="(item, index) in protectList" :key="item.id">
					<view :class="{'rightColor': item.isPass == 1, 'wrongColor': item.isPass === 2}">
						{{index+1}}、{{item.item}}
					</view>
					<view class="check-result">
						<uni-data-checkbox :selectedColor="item.isPass == 1 ? '#33cc33' : 'red'" v-model="item.isPass"
							:localdata="item.status"></uni-data-checkbox>
					</view>
					<inspect-record :inspect="item" v-if="item.isPass == 2 && (item.remark || item.accessory.length !== 0)"></inspect-record>
					
				</view>
			</view>
			<view style="margin-bottom: 40rpx;">
				<view class="detail-title">
					<text>确认信息</text>
				</view>
				<view v-if="renovationInfo.fitstartCheckRemark" class="confirm-item">
					<view class="confirm-label">其他说明:</view>
					<textarea disabled  v-model="renovationInfo.fitstartCheckRemark" class="confirm-desc" value="" placeholder="请输入内容" />
				</view>
				<view v-show="renovationInfo.fitstartCheckConfirmAcc[0]" class="confirm-item">
					<view  class="confirm-label">业主/装修公司
					
						确认：:</view>
					<view class="sign-item">
						<!-- <image-viewer ></image-viewer> -->
						<imageViewer :imageWidth="220" v-model="renovationInfo.fitstartCheckConfirmAcc" />
						<!-- <image :src="resultUrl" mode=""></image> -->
					</view>
				</view>
				<view style="margin-bottom: 20rpx;">备注：</view>
				<view>
					此表做为房屋装修时对公共区域进行确认，如在装修前发现问题，物管中心将配合处理。如在装修过程中至装修完工备案前公区出现问题，均由装修公司或业主自行承担。</view>
			</view>
		</view>
	</view>
</template>

<script>
	import imageViewer from '@/myComponents/imageViewer.vue'
	import InspectRecord from '../components/inspectRecord.vue'
	export default {
		components: {
			InspectRecord,
			imageViewer
		},
		data() {
			return {
				renovationInfo: {
					fitstartCheckConfirmAcc: []
				},
				params1: [],
				resultUrl: '../../static/icon/8.png',
				status: [{
						text: '合格',
						value: 1,
						disable: false
					},
					{
						text: '不合格',
						value: 2,
						disable: false
					}
				],
				checkList: [],
				protectList: [],
				params: {
					applyId: null,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				params2: {
					id: null,
					stage: 'register_member',
					fitstartCheckRemark: null,
					fitstartCheckConfirmAcc: null
				}
			}
		},
		onLoad(options) {
			this.params.applyId = +options.id
			this.params2.id = +options.id
			this.getDetail()
			this.getInfo(+options.id)
		},
		onShow() {
			if (uni.getStorageSync('ceshiUrl')) {
				this.resultUrl = uni.getStorageSync('ceshiUrl');
				uni.removeStorageSync('ceshiUrl');
			}
		},
		methods: {
			getInfo(id) {
				this.$http.post('/fitment/apply/info', {
					id
				}).then(res => {
					if (res.code === 10000) {
						console.log(res)
						res.data.fitstartCheckConfirmAcc = [res.data.fitstartCheckConfirmAcc]
						this.renovationInfo = res.data
					}
				})
			},
			getDetail() {
				uni.showLoading()
				this.$http.post('/fitment/checkitem/list', this.params).then(res => {
					if (res.code === 10000) {
						res.data.list = res.data.list || []

						res.data.list.forEach(item => {
							item.status = [{
									text: '合格',
									value: 1
								},
								{
									text: '不合格',
									value: 2
								}
							]
							let index = item.isPass == 1 ?  1 : 0
							item.status[index].disable = true
						})
						this.checkItemList = res.data.list
						this.checkList = res.data.list.filter(item => item.type === 1)
						this.protectList = res.data.list.filter(item => item.type === 2)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '../../style/info.scss';

	.sign-item {
		// margin-left: 20rpx;
		width: 220rpx;
		height: 220rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.confirm-item {
		display: flex;
		padding-right: 20rpx;
		margin-bottom: 60rpx;

		.confirm-label {
			width: 200rpx;
			margin-right: 30rpx;
			display: flex;
			align-items: center;
		}

		// justify-content: space-between;
	}

	.confirm-desc {
		width: 452rpx;
		padding: 20rpx;
		border: 2rpx solid #ccc;

	}

	.rightColor {
		color: #33cc33;
		// color: #49B980;
	}

	.wrongColor {
		color: red;
	}

	.check-content {
		height: auto;
		width: 680rpx;
		// border: 2rpx solid #ccc;
		// background-color: pink;
		// padding: 20rpx;

		.install-type {
			font-size: 36rpx;
		}

		.check-title {
			height: 80rpx;
			font-size: 40rpx;
			text-align: center;
			line-height: 60rpx;
			border-bottom: 2rpx solid #DEDEDE;
			margin-bottom: 30rpx;
		}

		.check-item {
			margin-bottom: 40rpx;
			font-size: 32rpx;

		}

		.check-result {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-bottom: 20rpx;

			.switch {
				color: #3080FB;
			}
		}
	}
</style>
